<template>
  <transition name="">
    <div class="foodWrapper">
      <v-header
        :headerBg="headerBg"
        :fontColor="fontColor"
        title="美食">
      </v-header>

      <scroll
        :data="foodStoreList"
        style="overflow: hidden;"
        ref="scroll">
        <div>

        <slider :list="bannerList">
          <div v-for="item in bannerList" :key="item.id"
              @click="clickBanner(item)">
              <img v-lazy="item.thumbUrl" style="height:180px">
          </div>
        </slider>

<!-- 美食导航 -->
      <div class="cartEntrance">
        <div class="cartEntranceItem" @click="toQianxmeishi">
          <div class="cartEntranceItemImg">
            <img :src="qianxmeishi">
          </div>
          黔乡美食
        </div>

        <div class="cartEntranceItem" @click="toZaocan">
          <div class="cartEntranceItemImg">
            <img :src="zaocan">
          </div>
          营养早餐
        </div>

        <div class="cartEntranceItem" @click="toXiaochi">
          <div class="cartEntranceItemImg">
            <img :src="xiaochi">
          </div>
          特色小吃
        </div>

        <div class="cartEntranceItem" @click="toXiaochao">
          <div class="cartEntranceItemImg">
            <img :src="xiaochao">
          </div>
          农家土味
        </div>
      </div>

<!-- 美食单品拼图展示 -数据foodStoreListWithinFive -->
  <div class="foodJigsaw">
    <div class="foodJigsawItem" v-for="item in foodStoreListWithinfour" :key="item.id"  @click="toFoodDetailsOne(item.id)">
      <img :src="item.thumbUrl" alt="">
    </div>
  </div>

<!-- 运营配置广告 数据 foodStoreListfive-->
  <div v-if="this.foodStoreListfive && this.foodStoreListfive.thumbUrl && this.foodStoreListfive.id">
    <div class="advertising" @click.stop="toFoodDetailsOne(foodStoreListfive.id)">
      <img v-lazy='this.foodStoreListfive.thumbUrl' alt="">
    </div>
  </div>

<!-- 推荐美食列表 -->
      <h3 style="font-size: 20px; padding: 15px 15px 0px; background: #fff; margin-top: 10px;">美食精选</h3>
      <ul class="specialty-list" :style="{marginBottom: marginBottom + 'px'}">
        <li v-for="item in foodStoreList" :key="item.id" @click="toFoodDetailsOneZero(item.id)">
          <div class="span">
            <span>{{item.areaName}}-</span>
            <span>距您{{(Math.round(item.distance)/1000)}}km</span>
          </div>
          <div class="thumb" v-lazy:backgroundImage="item.thumbUrl"></div>
          <div class="info">
            <p class="name">{{item.name}}</p>
            <div class="bottom">
              <p class="comment">{{item.feature}}</p>
            </div>
          </div>
        </li>
      </ul>

        </div>
        <not-data v-if="foodStoreList.length === 0" tip="空空如也~<br>"></not-data>
        <div :style = "{height: height + 'px'}"></div>

      </scroll>

<!-- 搜索 -->
    <global-search v-model="showSearch" type="address" :range="[3]"></global-search>

    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import Slider from '@/components/slider/slider'
import axios from '@/api/axiosApi'
import Divider from '@/components/divider/divider'
import { Rater, Tab, TabItem, TransferDom, Grid, GridItem, Scroller, Flexbox, FlexboxItem } from 'vux'
import { isIphoneX } from '@/assets/js/brower'
import headerBg from '@/assets/img/cart_headerBg.png'
import { statusBarMixin } from '@/assets/js/mixin'

import scenicIcon from '@/assets/img/icon/goods_scenic.png'
import hotelIcon from '@/assets/img/icon/goods_hotel.png'
import featureIcon from '@/assets/img/icon/goods_specialty.png'
import foodIcon from '@/assets/img/icon/goods_food.png'
import airplaneIcon from '@/assets/img/icon/goods_airplane.png'
import busIcon from '@/assets/img/icon/goods_bus.png'
import trainIcon from '@/assets/img/icon/goods_train.png'

import searchIcon from '@/assets/img/cart_shop_icon_search@3x.png'
import AIAvatar from '@/assets/img/cart_shop_icon_robot@3x.png'
import GlobalSearch from '@/components/global-search/global-search'
import notData from '@/components/not-data/not-data'
// import { QINIU_PREFIX } from '@/api/config'

import qianxmeishi from '@/assets/foodIcon/food_qianxiang.png'
import xiaochao from '@/assets/foodIcon/food_xiaochao.png'
import xiaochi from '@/assets/foodIcon/food_xiaochi.png'
import zaocan from '@/assets/foodIcon/food_zaocan.png'
import foodMark from '@/assets/foodIcon/foodMark.png'
import { mapGetters } from 'vuex'

export default {
  mixins: [statusBarMixin],
  data () {
    return {
      bannerList: [],
      tagWidth: 1200,
      currentPosition: [],
      currentSort: 0,
      addressInfo: {},
      marginBottom: 0,
      scenicIcon,
      hotelIcon,
      foodIcon,
      featureIcon,
      airplaneIcon,
      busIcon,
      trainIcon,
      qianxmeishi,
      xiaochao,
      xiaochi,
      zaocan,
      foodMark,
      sortTools: [
        {
          label: '智能排序',
          value: 0
        },
        {
          label: '价格↑',
          value: 1
        },
        {
          label: '价格↓',
          value: 2
        },
        {
          label: '距离↑',
          value: 3
        }
      ],
      foodStoreList: [],
      foodStoreListWithinfour: [],
      foodStoreListfive: {},
      storeFoodList: [],
      tagNameList: [],
      tagNameListClassification: [],
      box1ItemWidth: '',
      // 标签处理
      hotTags: [{
        id: '',
        name: '全部'
      }],
      currentTag: '',
      // 搜索
      showSearch: false,
      seachValue: '',
      headerBg,
      fontColor: '#000',
      statusBarColor: 'black',
      addressInfoName: '凯里',
      addressInfoId: 'ba062c32fdf611e7ba2d00163e0c27f8',
      searchIcon,
      AIAvatar
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Scroll,
    Rater,
    Tab,
    TabItem,
    Slider,
    Grid,
    GridItem,
    Scroller,
    Divider,
    Flexbox,
    FlexboxItem,
    GlobalSearch,
    notData
  },
  computed: {
    ...mapGetters(['position'])
  },
  mounted () {
    this.$refs.scroll.$el.style.height = window.innerHeight + 'px'
  },
  created () {
    this.getFoodStore()
    this.getFoodStoreWithinFive()
    this._getBanner()
    this.pageNum = 1
    this.pageSize = 10
    this.marginBottom = 30
    this.Vheight = 0
    this.height = 0
    if (isIphoneX()) {
      this.marginBottom = 30
      this.Vheight = 44
      this.height = 30
    } else {
      this.marginBottom = 30
      this.Vheight = 22
      this.height = 30
    }
  },
  methods: {
// banner
    _getBanner () {
      axios.get(this, '/v1/banner/3', null, (data) => {
        data.forEach(item => {
          item.thumbUrl += '-banner'
        })
        this.bannerList = data
      }, null, false)
    },
// 美食首页分类标签
    // getFoodCategoryRecommend () {
    //   axios.get(this, `/v1/foodCategory?recommend=1&areaId=${this.addressInfoId}`, null, (data) => {
    //     if (data !== '' || data !== null) {
    //       data.forEach((item, index) => {
    //         if (item.tagNames) {
    //           if (item.thumbUrl) {
    //             if (item.thumbUrl.indexOf(QINIU_PREFIX) > -1) {
    //               item.thumbUrl += '-w200'
    //             }
    //           }
    //           item.tagNames = item.tagNames.split(';')
    //         }
    //       })
    //       this.foodCategoryRecommendList = data
    //     }
    //   })
    // },
// 美食首页拼图5个数据(前面4张加后面第5张)
    getFoodStoreWithinFive () {
      axios.get(this, `/v1/storeFood?recommend=1&longitude=${this.position[0]}&latitude=${this.position[1]}`, null, (data) => {
        console.log(data)
        if ((data !== '' || data !== null) && data.length >= 5) {
          data.forEach((item, index) => {
            if (item.storeUrl) {
              item.storeUrl = item.storeUrl.split(';')
            }
          })
          this.foodStoreListWithinfour = data.slice(0, 4)
          this.foodStoreListfive = data[4]
        }
      })
    },
// 美食首页底部门店列表数据
    getFoodStore () {
      axios.get(this, `/v1/storeFood?recommend=0&longitude=${this.position.slice(0, 1)}&latitude=${this.position.slice(1, 2)}`, null, (data) => {
        if (data !== '' || data !== null) {
          data.forEach((item, index) => {
            if (item.storeUrl) {
              item.storeUrl = item.storeUrl.split(';')
            }
          })
          this.foodStoreList = data
        }
      })
    },
// 页面跳转
    handleGoFoodDescribe (id, contentId) {
      this.$router.push({
        path: `/foodDescribe/${id}`
      })
    },
    toFoodDetailsOneZero (id) {
      this.$router.push({
        path: `/foodDetailsOne/${id}`,
        query: {
          recommend: '0'
        }
      })
    },
    toFoodDetailsOne (id) {
      this.$router.push({
        path: `/foodDetailsOne/${id}`,
        query: {
          recommend: '1'
        }
      })
    },
    clickBanner (banner) {
      if (banner.type === 0) {
        if (banner.contentId) {
          this.$router.push(`/content/${banner.contentId}/${banner.name}`)
        }
      } else {
        if (banner.linkId) {
          const tmp = banner.linkId.split(':')
          if (tmp.length === 2) {
            switch (tmp[0]) {
              case 'scenic':
                this.$router.push(`/scenic/${tmp[1]}`)
                break
              case 'hotel':
                this.$router.push(`/hotel/${tmp[1]}`)
                break
              case 'feature':
                this.$router.push(`/specialLocalProductDetail/${tmp[1]}`)
                break
              case 'food':
                this.$router.push(`/foodDetailsOne/${tmp[1]}`)
                break
              case 'strategy':
                this.$router.push('/address/strategy/' + tmp[1])
                break
              case 'travels':
                this.$router.push('/address/travels/' + tmp[1])
                break
            }
          }
        }
      }
    },
    toQianxmeishi () {
      this.$router.push({
        path: `/foodList`,
        query: {
          id: '00589b1237e74bbd9daca20c7e28933b',
          name: '黔乡美食'
        }
      })
    },
    toZaocan () {
      this.$router.push({
        path: `/foodList`,
        query: {
          id: '05c2619e3ea0452289f0754e6f2af3c4',
          name: '营养早餐'
        }
      })
    },
    toXiaochi () {
      this.$router.push({
        path: `/foodList`,
        query: {
          id: '4582212e4a5947799de068a8157feeaa',
          name: '特色小吃'
        }
      })
    },
    toXiaochao () {
      this.$router.push({
        path: `/foodList`,
        query: {
          id: '8f4ad76048a143c0960b6205cc3298fe',
          name: '农家土味'
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  @import '~@/assets/css/mixins.styl'

.search{
    position absolute
    top 43%
    left 44%
    transform translate(-50%, -50%)
    display flex
    justify-content space-between
    align-items center
    color #fff
    border 1px solid rgba(255, 255, 255, 0.4)
    background #f5f5f5
    width 60%
    height 32px
    line-height 42px
    border-radius 30px
    padding 0 0px 0 18px
    font-size 16px
    .searchLeft{
      display flex
      align-items center
    }
  }

.foodAddressChange {
  display flex
  align-items center
  font-size $font-size-title
  padding 1px 0 1px 10px
  margin-top 1px
  .foodAddressSeach {
    display flex
    align-items center
    border 1px solid $color-border
    border-radius 50px
    font-size $font-size-title
    padding 0px 6px 2px 12px
    margin-top 1px
  }
}
  .slide-enter-active, .slide-leave-active {
    transition: all .4s
  }

  .slide-enter, .slide-leave-to {
      transform: translate3d(100%, 0, 0)
  }

  .allHappy {
    height 43px
    line-height 43px
  }

  .allHappy span {
    position: relative;
    font-size: $font-size-title;
    padding: 12px 24px;
    font-weight: bold;
    color: #333;
    &:before {
      display: block;
      content: '';
      position: absolute;
      left: 12px;
      top: 14px;
      bottom: 10px;
      width: 5px;
      border-radius: 2.5px;
      background: $color-theme;
    }
  }

  .allFood {
    margin-left 10%
    margin-right 10%
  }

  .allFood span {
      color black
  }

.contentWrapper {
    background-color: #fff;
    box-shadow: 0px 0px 15px #C5C5C5;
    margin-top 5px
}

.scrollRecom{
  display flex
  background #fff
  margin 10px 10px
  .recommend{
    margin 0 5px
    position relative
    box-shadow 0 0 6px #999
    width 200px
    height 124px
    img{
      width 200px
      height 124px
      border-radius 2px
    }
    .iconPic{
      position absolute
      top 5px
      left 10px
      width 50px
      z-index 100
    }
    .centent{
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-line-clamp 2
      -webkit-box-orient vertical
      font-size $font-size-title
      color $color-text-5
      position absolute
      bottom 10px
      left 10px
    }
  }
}

.contentWrapperFo {
  padding 0px 15px 15px
  margin 0
  background #fff
}

.contentWrapperFood {
    position relative
    margin 0px 0 10px
    overflow hidden
    height 156px
    width 47%
    float left
    margin 5px
}

.allFoodWrapper {
  background-color: white
  padding-bottom 2px
  margin-top 10px
}

.box1 {
  height: 100px;
  position: relative;
  // display flex
}
.box1-item {
  height: 88px;
  background-color: #ccc;
  display:inline-block;
  margin-left: 15px;
  // float: left;
  text-align: center;
  line-height: 88px;
}

.foodText{
  position absolute
  bottom 40px
  // left 12px
}

.foodTitle p {
    font-size: $font-size-title
    padding-left 15px
    padding-right 15px
    color $color-text-5
    font-weight bold
}

.foodDescribe {
    width 300px
}

.foodDescribe p {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: $font-size-desc
    color: $color-text-5
    padding-left 15px
    padding-right 15px
}

.hrWrapper {
    margin-left 3%
    margin-right 3%
    margin-top 6px
    height:1px;border:none;border-top:1px dashed $color-text-2
}

.positionWrapper {
    margin-left 15px
}

.positionWrapper span {
    font-size $font-size-small
    color $color-text-2
}
.peopleWrapper {
    text-align right
    margin-right 15px
}

.peopleWrapper span {
    font-size $font-size-small
    color $color-text-2
}

.categeryWrapper{
    padding-left 15px
    padding-right 15px
    color #fff
    no-wrap()
    width 90%
    font-size $font-size-small
}

.categeryWrapper button {
    // margin-top 9px
}

.categerButton {
  border-radius 2px
  border 1px solid #fff
  padding-left 10px
  padding-right 10px
  height:20px;
  color #fff
  background: none;
  margin-left 5px
}

.backStoreImageWrapper {
  width 100%
  height 120px
  img {
    width 100%
    // height 100%
  }
}

.bottomDiv {
    height:50px;
    background-color: $color-background
}

.wrapper {
  padding-left 10px
  padding-right 10px
  overflow: hidden;
  min-width: calc(100vw - 24px)
}

.tag-item {
  width: fit-content;
  background: #fff;
  color: #333;
  font-size: $font-size-desc;
  padding: 6px 12px;
  line-height: 1;
  display: inline-block;
  margin-right: 12px;
  border: 1px solid $color-border;
  border-radius: 3px;
  position: relative;
  margin-bottom: 15px;
}
.active {
  background: $color-theme;
  color: #fff;
  &:after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 12px;
    border: 6px solid transparent;
    border-top-color: $color-theme;
  }
}

.popup-wrapper {
  background: #fff;

  .search-list {
    padding: 15px;
    list-style: none;
    line-height: 1.6;

    li {
      border-bottom: 1px solid $color-border
      padding: 5px 0;
    }
    .name {
      font-weight: bold;
    }
    .feature {
      font-size: 13px;
      color: $color-text-dark;
      overflow : hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.cartEntrance{
  display flex
  flex-wrap wrap
  padding 20px 0 20px
  background #fff
  .cartEntranceItem{
    display flex
    flex-direction column
    align-items center
    width 25%
    overflow hidden
    .cartEntranceItemImg {
      img {
        height 32px
      }
    }
  }
}

.foodJigsaw {
  margin-top 10px
  padding 20px 15px 0
  display flex
  flex-wrap wrap
  background #fff
  .foodJigsawItem {
    width 48%
    max-height 113px
    margin 2px
    overflow hidden
    position relative
    img {
      width 100%
    }
  }
}

.advertising {
  margin 0px
  padding-bottom 10px
  height 130px
  overflow hidden
  background: #fff
  position relative
  img {
    width 90%
    height 120px
    display inline-block
    padding 3px 15px 0 17px
  }
  .foodMark {
    position absolute
  }
}

.specialty-list
  padding 10px 15px
  background-color #fff
  &:after
    display block
    content ''
    clear both
  li
    float left
    width calc(50vw - 20px)
    background #ffffff
    margin-bottom 8px
    position relative
    &:nth-child(2n)
      margin-left 2px
    &:nth-child(2n + 1)
      margin-right 8px
  .span {
    background rgba(0, 0, 0, 0.4)
    position absolute
    top 88px
    left 6px
    z-index 500
    font-size 12px
    color #ffffff
    padding 2px 4px
    display flex
    no-wrap()
    max-width 90%
  }
  .thumb
    width calc(50vw - 18px)
    height calc(50vw - 70px)
    background-size cover
    background-position center
    background-repeat no-repeat
    border-radius 5px
  .info
    padding 12px
  .name
    font-size 15px
    color #333
    no-wrap()
    line-height 1
    margin-bottom 12px
  .bottom
    display flex
    align-items center
    justify-content space-between
  .comment
    font-size 13px
    color #999
    line-height 1
    no-wrap()
  .price
    font-size 18px
    color $color-theme
    span
      font-size 12px
</style>
